<template>
  <div ref="cahrtRef" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
import { getThemeValue } from '@/utils/theme_color.js'
import ResizeObserver from 'resize-observer-polyfill'
require('echarts/theme/macarons')
import { mapState } from 'vuex'
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    options: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    options: {
      handler(newValue) {
        this.chart.setOption(newValue)
      },
      immediate: false,
      deep: true
    },
    sideTheme: {
      handler(newValue) {
        setTimeout(() => {
          this.updateChart()
        }, 500)
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    ...mapState({
      sideTheme: state => state.settings.sideTheme
    })
  },
  mounted() {
    if (this.$el) {
      this.$nextTick(() => {
        this.initChart()

        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            echarts.getInstanceByDom(entry.target)?.resize()
          }
        })
        resizeOb.observe(this.$refs.cahrtRef)

        this.updateChart()
      })
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    // this.chart = null
    window.removeEventListener('resize', this.handleResize())
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.cahrtRef)
      this.chart.setOption(this.options, true)
      const _self = this
      window.addEventListener('resize', this.handleResize)
      this.chart.on('click', function(params) {
        _self.$emit('handleClick', params)
      })
    },
    handleResize() {
      this.chart.resize()
    },
    updateChart() {
      const titleThemeDark = getThemeValue('titleThemeDark')

      const DarkThemeStyle = {
        title: {
          textStyle: {
            color: titleThemeDark.titleColor || '#333'
          }
        },
        legend: {
          textStyle: {
            color: titleThemeDark.titleColor || '#333'
          }
        },
        xAxis: {
          axisLabel: {
            color: '#fff'
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.15)'
            }
          },
          axisLine: {
            show: false
          }
        }
      }
      const titleThemeHigh = getThemeValue('titleThemeHigh')
      const HighThemeStyle = {
        title: {
          textStyle: {
            color: titleThemeHigh.titleColor
          }
        },
        legend: {
          textStyle: {
            color: titleThemeHigh.titleColor
          }
        },
        xAxis: {
          axisLabel: {
            color: '#606266'
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            color: '#606266'
          },
          axisLine: {
            show: false
          }
        }
      }
      if (this.sideTheme === 'theme-dark' || this.sideTheme === 'tech') {
        this.chart.setOption(DarkThemeStyle)
      } else {
        this.chart.setOption(HighThemeStyle)
      }
    }

  }
}
</script>
<style>

</style>
